<template>
    <div class="aside">
        <el-menu default-active="1-4-1" class="el-menu-vertical-demo" :collapse="isCollapse" background-color="#545c64"
            text-color="#fff" active-text-color="#ffd04b" :router="true">
            <!-- 左侧大标题 -->
            <h3>{{ isCollapse ? '后台' : '后台管理系统' }}</h3>

            <el-menu-item @click="handleChange(item)" v-for="item in noChildren" :key="item.name" :index="item.path">
                <i :class="item.icon"></i>
                <span slot="title">{{ item.label }}</span>
            </el-menu-item>
            <el-submenu v-for="item in hasChildren" :key="item.name" :index="item.label">
                <template slot="title">
                    <i :class="item.icon"></i>
                    <span slot="title">{{ item.label }}</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item @click="handleChange(subitem)" v-for="subitem in item.children" :key="subitem.label"
                        :index="subitem.path">
                        <template slot="title">
                            <i :class="subitem.icon"></i>
                            <span slot="title">{{ subitem.label }}</span>
                        </template>
                    </el-menu-item>
                </el-menu-item-group>
            </el-submenu>
        </el-menu>
    </div>
</template>
  
<script>
import Cookies from 'js-cookie'
export default {
    data() {
        return {
            // menuData: [
            //     {
            //         path: '/',
            //         name: 'home',
            //         label: '首页',
            //         icon: 's-home',
            //         url: 'Home/Home'
            //     },
            //     {
            //         path: '/mall',
            //         name: 'mall',
            //         label: '商品管理',
            //         icon: 'video-play',
            //         url: 'MallManage/MallManage'
            //     },
            //     {
            //         path: '/user',
            //         name: 'user',
            //         label: '用户管理',
            //         icon: 'user',
            //         url: 'UserManage/UserManage'
            //     },
            //     {
            //         label: '其他',
            //         icon: 'location',
            //         children: [
            //             {
            //                 path: '/page1',
            //                 name: 'page1',
            //                 label: '页面1',
            //                 icon: 'setting',
            //                 url: 'Other/PageOne'
            //             },
            //             {
            //                 path: '/page2',
            //                 name: 'page2',
            //                 label: '页面2',
            //                 icon: 'setting',
            //                 url: 'Other/PageTwo'
            //             }
            //         ]
            //     }
            // ]
        };
    },
    methods: {
        handleChange(item) {
            this.$store.commit('tag/renewTagsLists', item);
        }
    },
    computed: {
        // 没有子菜单
        noChildren() {
            return this.menuData.filter(item => !item.children)
        },
        // 有子菜单
        hasChildren() {
            return this.menuData.filter(item => item.children)
        },
        isCollapse() {
            return this.$store.state.tab.isCollapse;
        },
        menuData() {
            return JSON.parse(Cookies.get('menu')) || this.$store.state.tag.menu
        }
    }
}
</script>
  
<style lang="scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    // width: 200px;
    min-height: 400px;
}

.el-menu {
    height: 100vh;
    border: none;

    h3 {
        color: #fff;
        text-align: center;
        font-size: 16px;
        line-height: 48px;
        font-weight: 400;
    }
}
</style>